<template>
  <el-dialog title="拍照" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" :before-close="closeHandler">
    <div class="box">
      <video autoplay width="240" height="360"></video>
      <div>
        <canvas v-if="imgSwait" ref="canvas" width="240" height="360"></canvas>
      </div>
    </div>
    <div class="div">
      <el-button @click="takePhoto">拍照</el-button>
      <el-button @click="savePhoto">上传</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { remote } from 'electron'
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { upload64 ,faceCheck} from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        imgSwait: false,
        // 保存
        dialog: {},
        // 保存canvas
        canvas: {},
        // 保存拍摄的照片
        photoData: '',
        // 保存摄像头
        video: {},
        formData: {},
        // 保存准备关闭摄像头
        MediaStreamTrack: ''
      }
    },
    beforeDestroy() {
      this.photoData = null
    },
    methods: {
      resetFormData() {
        this.formData = {}
      },
      //用于初始化视频流
      initialize() {
        const that = this
        this.dialog = remote.dialog
        this.$nextTick(() => {
          this.video = window.document.querySelector('video')
          window.navigator.mediaDevices
            .getUserMedia({
              video: { facingMode: 'user', width: 240, height: 360 } // 调用前置摄像头并设置尺寸大小 后置摄像头使用video: { facingMode: { exact: "environment" }
            }).then(function (stream) {
              // 准备关闭摄像头
              that.MediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0]
              that.video.srcObject = stream
              that.video.play()
            }).catch(function (err) {
              that.$message.error('连接摄像头失败！')
            })
        })
      },
      //弹出对话框保存图像
      async savePhoto() {
        try {
          let res = await upload64(this.photoData)
          if (res.data.url) {
            await this.$store.dispatch('user/setAddPhoto', res.data.url)
            this.closeHandler()
          }
        } catch (err) {
          this.$message.error('保存失败！')
        }
      },
      // 拍照
      async takePhoto() {
        this.imgSwait = true
        var that=this
        this.$nextTick(() => {
          this.canvas = window.document.querySelector('canvas')
          // 将当前的视频图像绘制在 canvas 上
          this.canvas.getContext('2d').drawImage(this.video, 0, 0, 240, 360)

          // 获取  base64 格式的图像数据
          this.photoData = this.canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg|jpeg);base64,/, '')

         faceCheck( {image:this.photoData} ).then(function(result){
                                                  if(result.data!=""){
                                                      that.$message.error(result.data)
                                                      that.photoData = null
                                                      that.canvas = {}
                                                  }
                                              })
        })
      },
      // 清空并关闭视频
      closeHandler() {
        this.imgSwait = false
        this.dialog = {}
        // 保存canvas
        this.canvas = {}
        // 保存拍摄的照片
        this.photoData = ''
        // 保存摄像头
        this.video = {}
        this.formData = {}
        this.close()
        // 关闭摄像头
        this.MediaStreamTrack && this.MediaStreamTrack.stop()
        // 保存准备关闭摄像头
        this.MediaStreamTrack = ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    display: flex;
    justify-content: center;
    video {
      //   width: 240px;
      margin-right: 30px;
      border: 1px solid #ccc;
    }
    div {
      border: 1px solid #ccc;
      width: 240px;
      height: 360px;
      display: flex;
      align-items: center;
    }
  }
  .div {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
</style>
